<template>
  <div class="callback-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="page-title">
        <div class="title-with-back">
          <el-button 
            type="primary" 
            :icon="ArrowLeft" 
            @click="$router.push('/tools')"
            class="blue-return-button"
            circle
          />
          <div class="title-content">
            <div class="title-main">
              <el-icon class="title-icon"><Message /></el-icon>
              <h2>回调数据管理</h2>
            </div>
            <p class="page-description">
              <el-icon><Document /></el-icon>
              <span>通用回调数据接收、存储、查询功能</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务控制面板 -->
    <el-card shadow="hover" class="control-panel">
      <template #header>
        <div class="card-header">
          <div class="card-header-title">
            <el-icon class="card-icon"><Setting /></el-icon>
            <span>服务控制</span>
          </div>
          <div class="service-status">
            <el-tag :type="serviceStatus.running ? 'success' : 'danger'" size="large">
              <el-icon>
                <component :is="serviceStatus.running ? 'VideoPlay' : 'VideoPause'" />
              </el-icon>
              {{ serviceStatus.running ? '接收中' : '已停止' }}
            </el-tag>
          </div>
        </div>
      </template>
      
      <div class="control-content">
        <div class="control-buttons">
          <el-button 
            :type="serviceStatus.running ? 'danger' : 'success'"
            @click="toggleDataReceiving"
            :loading="controlLoading"
            size="default"
          >
            <el-icon>
              <component :is="serviceStatus.running ? 'VideoPause' : 'VideoPlay'" />
            </el-icon>
            {{ serviceStatus.running ? '停止接收' : '开始接收' }}
          </el-button>
          <el-button 
            type="info" 
            @click="clearAllData"
            :loading="clearLoading"
          >
            <el-icon><Delete /></el-icon>
            清空数据
          </el-button>
        </div>
        
        <div class="service-info">
          <el-statistic title="接收数据时长" :value="formatDuration(localDuration)" />
        </div>
      </div>
    </el-card>

    <!-- 数据统计面板 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <el-statistic title="总接收数据" :value="stats.total_received || 0">
            <template #prefix>
              <el-icon style="color: #409eff"><DataBoard /></el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <el-statistic title="内存数据量" :value="serviceStatus.memory_data_count || 0">
            <template #prefix>
              <el-icon style="color: #67c23a"><MemoryCard /></el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <div class="last-receive-time">
            <div class="stat-title">最后接收时间</div>
            <div class="stat-value">
              {{ formatTime(serviceStatus.last_receive_time) || '暂无数据' }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据筛选 -->
    <el-card shadow="hover" class="filter-panel">
      <template #header>
        <div class="card-header">
          <div class="card-header-title">
            <el-icon class="card-icon"><Search /></el-icon>
            <span>数据筛选</span>
          </div>
          <div class="filter-actions">
            <el-button type="primary" @click="refreshData" :loading="loading">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button type="info" @click="exportData">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
          </div>
        </div>
      </template>
      
      
      <el-form :model="filterForm" class="callback-filter-form">
        <div class="search-form-content">
          <div class="search-form-fields">
            <el-form-item label="关键字">
              <el-input 
                v-model="filterForm.keyword" 
                placeholder="模糊搜索数据内容"
                clearable
                @clear="handleSearch"
                @keyup.enter="handleSearch"
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="精准匹配">
              <div style="display: flex; align-items: center; gap: 8px;">
                <el-input 
                  v-model="filterForm.fieldName" 
                  placeholder="如: area, nickname"
                  clearable
                  @clear="handleSearch"
                  @keyup.enter="handleSearch"
                  style="width: 140px"
                />
                <span style="font-weight: bold; color: #409eff; font-size: 16px;">=</span>
                <el-input 
                  v-model="filterForm.fieldValue" 
                  placeholder="精确匹配值"
                  clearable
                  @clear="handleSearch"
                  @keyup.enter="handleSearch"
                  style="width: 140px"
                />
              </div>
            </el-form-item>
          </div>
          
          <div class="search-form-actions">
            <el-button @click="showAdvancedFilters = !showAdvancedFilters">
              <el-icon>
                <component :is="showAdvancedFilters ? 'ArrowUp' : 'ArrowDown'" />
              </el-icon>
              {{ showAdvancedFilters ? '收起筛选' : '高级筛选' }}
            </el-button>
            <el-button type="primary" @click="handleSearch" class="search-btn">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button type="warning" @click="resetFilter" class="reset-btn">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </div>
        </div>
        
        <!-- 高级筛选面板 -->
        <transition name="filter-expand">
          <div v-show="showAdvancedFilters" class="search-form-expanded">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleSearch"
                style="width: 240px"
              />
            </el-form-item>
          </div>
        </transition>
      </el-form>
    </el-card>

    <!-- 数据列表 -->
    <el-card shadow="hover" class="data-panel">
      <template #header>
        <div class="card-header">
          <div class="card-header-title">
            <el-icon class="card-icon"><DataLine /></el-icon>
            <span>回调数据列表</span>
          </div>
          <div class="data-count">
            共 {{ callbackData.length }} 条数据
          </div>
        </div>
      </template>

      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>

      <div v-else-if="callbackData.length === 0" class="empty-container">
        <el-empty description="暂无回调数据">
          <el-button type="primary" @click="refreshData">刷新数据</el-button>
        </el-empty>
      </div>

      <div v-else class="data-list">
        <div 
          v-for="(item, index) in paginatedData" 
          :key="item.receive_seq"
          class="data-item"
        >
          <div class="data-header">
            <div class="header-left">
              <span class="data-seq">
                <el-icon class="seq-icon"><Document /></el-icon>
                {{ item.receive_seq }}
              </span>
              <span class="data-time">{{ item.receive_time }}</span>
            </div>
            <div class="header-right">
              <el-button 
                @click="toggleDataExpand(index)" 
                :icon="item.expanded ? 'ArrowUp' : 'ArrowDown'"
                size="small"
                text
                type="primary"
              >
                {{ item.expanded ? '折叠' : '展开' }}
              </el-button>
              <el-button 
                @click="copyData(item)" 
                icon="DocumentCopy"
                size="small"
                text
                type="info"
                title="复制JSON"
              />
              <el-button 
                @click="deleteData(item)" 
                icon="Delete"
                size="small"
                text
                type="danger"
                title="删除数据"
              />
            </div>
          </div>
          
          <!-- 预览模式 -->
          <div v-show="!item.expanded" class="data-preview" @click="toggleDataExpand(index)">
            <span class="preview-text">{{ getDataPreview(item.data) }}</span>
          </div>
          
          <!-- 展开模式 -->
          <div v-show="item.expanded" class="data-content">
            <div class="json-viewer">
              <pre class="json-content">{{ formatData(item.data) }}</pre>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="callbackData.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document, Search, Refresh, Download, ArrowLeft, Message, DataLine, Setting, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { componentLogger } from '@/utils/logger'
import { copyToClipboard as copyText } from '@/utils/clipboard'
import api from '@/utils/api'
import dayjs from 'dayjs'
import { formatDurationFromSeconds } from '@/utils/duration'

// 响应式数据
const serviceStatus = ref({
  running: false,
  uptime_seconds: 0,
  total_received: 0,
  last_receive_time: null,
  memory_data_count: 0
})

const stats = ref({
  total_received: 0
})

const callbackData = ref([])
const loading = ref(false)
const controlLoading = ref(false)
const clearLoading = ref(false)

const filterForm = ref({
  keyword: '',
  fieldName: '',
  fieldValue: '',
  dateRange: null
})

// 高级筛选显示状态
const showAdvancedFilters = ref(false)

// 分页
const currentPage = ref(1)
const pageSize = ref(20)

// 定时器
let statusTimer = null
let durationTimer = null

// 本地计时相关
const localDuration = ref(0)
const startTime = ref(null)

// 计算属性
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return callbackData.value.slice(start, end)
})

// 方法
const fetchServiceStatus = async () => {
  try {
    const response = await api.get('api/status')
    const payload = response.data || {}
    const newStatus = payload.success ? (payload.data || payload) : payload
    
    // 检查状态变化，同步计时器
    const wasRunning = serviceStatus.value.running
    const isRunning = newStatus.running
    
    serviceStatus.value = newStatus
    
    // 如果状态发生变化，同步计时器
    if (wasRunning !== isRunning) {
      if (isRunning && !durationTimer) {
        // 服务开始运行且计时器未启动，启动计时器
        startDurationTimer()
      } else if (!isRunning && durationTimer) {
        // 服务停止运行且计时器在运行，停止计时器
        stopDurationTimer()
      }
    }
  } catch (error) {
    componentLogger.error('获取服务状态失败:', error)
  }
}

const fetchCallbackData = async () => {
  try {
    loading.value = true
    
    // 构建查询参数
    const params = {}
    if (filterForm.value.keyword) {
      params.keyword = filterForm.value.keyword
    }
    
    // 添加 key-value 精确搜索参数
    if (filterForm.value.fieldName) {
      params.key = filterForm.value.fieldName
      if (filterForm.value.fieldValue) {
        params.value = filterForm.value.fieldValue
      }
    }
    
    const response = await api.get('data', { params })
    
    let dataList = []
    if (response.data.code === 200) {
      dataList = response.data.data || []
    } else {
      // 处理标准化响应格式
      const payload = response.data || {}
      const data = payload.success ? (payload.data || {}) : payload
      if (data.code === 200) {
        dataList = data.data || []
      }
    }
    
    // 按接收序号降序排列，确保最新数据在前面
    callbackData.value = dataList
      .sort((a, b) => b.receive_seq - a.receive_seq)
      .map(item => ({
        ...item,
        expanded: false
      }))
      
  } catch (error) {
    componentLogger.error('获取回调数据失败:', error)
    ElMessage.error('获取回调数据失败')
  } finally {
    loading.value = false
  }
}

const fetchStats = async () => {
  try {
    const response = await api.get('stats')
    if (response.data.code === 200) {
      stats.value = response.data.data
    } else {
      // 处理标准化响应格式
      const payload = response.data || {}
      const data = payload.success ? (payload.data || {}) : payload
      if (data.code === 200) {
        stats.value = data.data
      }
    }
  } catch (error) {
    componentLogger.error('获取统计数据失败:', error)
  }
}

// 切换数据接收状态
const toggleDataReceiving = async () => {
  try {
    controlLoading.value = true
    const action = serviceStatus.value.running ? 'stop' : 'start'
    const response = await api.post('api/control', { action })
    
    const payload = response.data || {}
    const data = payload.success ? (payload.data || payload) : payload
    
    if (data.message || payload.message) {
      ElMessage.success(data.message || payload.message)
      await fetchServiceStatus()
      
      // 根据操作控制计时器
      if (action === 'start') {
        // 开始接收时启动计时
        startDurationTimer()
      } else {
        // 停止接收时停止计时并清零
        stopDurationTimer()
      }
    }
  } catch (error) {
    componentLogger.error('数据接收控制失败:', error)
    ElMessage.error('数据接收控制失败')
  } finally {
    controlLoading.value = false
  }
}

// 保留原方法以备其他地方使用
const controlService = async (action) => {
  try {
    controlLoading.value = true
    const response = await api.post('api/control', { action })
    
    const payload = response.data || {}
    const data = payload.success ? (payload.data || payload) : payload
    
    if (data.message || payload.message) {
      ElMessage.success(data.message || payload.message)
      await fetchServiceStatus()
    }
  } catch (error) {
    componentLogger.error('服务控制失败:', error)
    ElMessage.error('服务控制失败')
  } finally {
    controlLoading.value = false
  }
}

const clearAllData = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清空所有回调数据吗？此操作不可撤销！',
      '确认清空',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    clearLoading.value = true
    const response = await api.get('clear')
    
    if (response.data.code === 200) {
      ElMessage.success(response.data.message)
    } else {
      // 处理标准化响应格式
      const payload = response.data || {}
      const data = payload.success ? (payload.data || {}) : payload
      if (data.code === 200 || payload.success) {
        ElMessage.success(data.message || payload.message || '清空成功')
      }
    }
    
    await Promise.all([
      fetchCallbackData(),
      fetchServiceStatus(),
      fetchStats()
    ])
  } catch (error) {
    if (error !== 'cancel') {
      componentLogger.error('清空数据失败:', error)
      ElMessage.error('清空数据失败')
    }
  } finally {
    clearLoading.value = false
  }
}

const refreshData = async () => {
  await Promise.all([
    fetchCallbackData(),
    fetchServiceStatus(),
    fetchStats()
  ])
}

const handleSearch = () => {
  // 实现搜索逻辑
  fetchCallbackData()
}

const resetFilter = () => {
  filterForm.value = {
    keyword: '',
    fieldName: '',
    fieldValue: '',
    dateRange: null
  }
  handleSearch()
}

const exportData = async () => {
  try {
    const response = await api.get('api/export')
    
    if (response.data.export_data) {
      const dataStr = JSON.stringify(response.data.export_data, null, 2)
      const blob = new Blob([dataStr], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `callback-data-${dayjs().format('YYYY-MM-DD-HH-mm-ss')}.json`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
      
      ElMessage.success('数据导出成功')
    }
  } catch (error) {
    componentLogger.error('导出数据失败:', error)
    ElMessage.error('导出数据失败')
  }
}

const toggleDataExpand = (index) => {
  const actualIndex = (currentPage.value - 1) * pageSize.value + index
  if (callbackData.value[actualIndex]) {
    callbackData.value[actualIndex].expanded = !callbackData.value[actualIndex].expanded
  }
}

// 复制数据 - 使用统一工具
const copyData = async (item) => {
  try {
    const jsonText = formatData(item.data)
    await copyText(jsonText, 'JSON')
  } catch (error) {
    componentLogger.error('复制失败:', error)
  }
}

const deleteData = async (item) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除序号为 #${item.receive_seq} 的数据吗？此操作不可恢复。`,
      '删除确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger'
      }
    )
    
    const response = await api.delete(`api/delete/${item.receive_seq}`)
    
    if (response.data.success) {
      ElMessage.success(response.data.message)
      // 刷新数据
      await Promise.all([
        fetchCallbackData(),
        fetchStats(),
        fetchServiceStatus()
      ])
    } else {
      ElMessage.error(response.data.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      componentLogger.error('删除数据失败:', error)
      ElMessage.error('删除数据失败')
    }
  }
}

const formatData = (data) => {
  try {
    return JSON.stringify(data, null, 2)
  } catch {
    return String(data)
  }
}

const getDataPreview = (data) => {
  try {
    const str = JSON.stringify(data)
    return str.length > 100 ? str.substring(0, 100) + '...' : str
  } catch {
    const str = String(data)
    return str.length > 100 ? str.substring(0, 100) + '...' : str
  }
}

const formatTime = (time) => {
  if (!time) return ''
  try {
    return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
  } catch {
    return time
  }
}

// 格式化时长显示 - 使用通用工具函数
const formatDuration = (seconds) => {
  return formatDurationFromSeconds(seconds)
}

// 启动本地计时
const startDurationTimer = () => {
  // 清除现有的计时器
  if (durationTimer) {
    clearInterval(durationTimer)
  }
  
  // 记录开始时间
  startTime.value = Date.now()
  localDuration.value = 0
  
  // 每秒更新一次时长
  durationTimer = setInterval(() => {
    if (startTime.value) {
      localDuration.value = Math.floor((Date.now() - startTime.value) / 1000)
    }
  }, 1000)
}

// 停止本地计时
const stopDurationTimer = () => {
  if (durationTimer) {
    clearInterval(durationTimer)
    durationTimer = null
  }
  startTime.value = null
  localDuration.value = 0
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

// 生命周期
onMounted(async () => {
  await refreshData()
  
  // 如果服务正在运行，启动计时器
  if (serviceStatus.value.running) {
    startDurationTimer()
  }
  
  // 定时刷新状态
  statusTimer = setInterval(() => {
    fetchServiceStatus()
  }, 5000)
})

onUnmounted(() => {
  if (statusTimer) {
    clearInterval(statusTimer)
  }
  if (durationTimer) {
    clearInterval(durationTimer)
  }
})
</script>

<style scoped>
.callback-management {
  padding: 0;
  /* 统一使用纯灰色背景，与其他页面保持一致 */
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.title-with-back {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.blue-return-button {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.blue-return-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%);
}

.title-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 28px;
  color: #9c27b0;
  background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ecf3fc 100%);
  border-left: 3px solid #9c27b0;
  border-radius: 6px;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.page-description .el-icon {
  font-size: 16px;
  color: #9c27b0;
  flex-shrink: 0;
}

.page-description span {
  flex: 1;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.card-icon {
  font-size: 20px;
  color: #9c27b0;
  background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.control-panel {
  margin-bottom: 20px;
}

.control-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.control-buttons {
  display: flex;
  gap: 12px;
}

.service-info {
  display: flex;
  gap: 40px;
}

.stat-card {
  text-align: center;
  margin-bottom: 20px;
}

.last-receive-time {
  text-align: center;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.filter-panel, .data-panel {
  margin-bottom: 20px;
}

.callback-filter-form {
  margin: 0;
}

.search-form-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.search-form-fields {
  display: flex;
  gap: 16px;
  flex: 1;
}

.search-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.callback-filter-form .el-form-item {
  margin-bottom: 0;
}

.search-form-expanded {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

/* 展开/收起动画 */
.filter-expand-enter-active,
.filter-expand-leave-active {
  transition: all 0.3s ease;
  max-height: 200px;
  overflow: hidden;
}

.filter-expand-enter-from,
.filter-expand-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
}

/* 按钮自定义样式 */
.search-btn {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.search-btn:hover {
  background: linear-gradient(135deg, #66B3FF 0%, #409EFF 100%);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
  transform: translateY(-2px);
}

.reset-btn {
  background: linear-gradient(135deg, #E6A23C 0%, #F0C78A 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.reset-btn:hover {
  background: linear-gradient(135deg, #F0C78A 0%, #E6A23C 100%);
  box-shadow: 0 6px 20px rgba(230, 162, 60, 0.4);
  transform: translateY(-2px);
  color: #fff;
}

.data-list {
  max-height: 600px;
  overflow-y: auto;
}

.data-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
  transition: all 0.3s ease;
}

.data-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.data-seq {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #409eff;
}

.seq-icon {
  font-size: 14px;
  color: #409eff;
}

.data-time {
  font-size: 12px;
  color: #909399;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-preview {
  padding: 12px 16px;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
}

.data-preview:hover {
  background: #f8f9fa;
}

.preview-text {
  font-family: 'Monaco', 'Menlo', monospace;
}

.data-content {
  padding: 16px;
}

.json-viewer {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 12px;
  border: 1px solid #e4e7ed;
}

.json-content {
  margin: 0;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-all;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.loading-container, .empty-container {
  padding: 40px;
  text-align: center;
}
</style>

